<template>
  <!-- <a-transition :value="visible" name="fade"> -->
  <view v-if="visible" class="arco-message-container">
    <view class="arco-message" :class="classNames">
      <view class="arco-message-icon">
        <a-icon name="info"></a-icon>
      </view>
      <view class="arco-message-content"> {{ label }} </view>
    </view>
  </view>
  <!-- </a-transition> -->
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, ref } from "vue";
import aIcon from "../arco-icon/index.vue";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    aIcon,
  },
  props: {
    closable: {
      type: Boolean,
      default: false,
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
    duration: {
      type: Number,
      default: 3e3,
    },
    resetOnUpdate: {
      type: Boolean,
      default: false,
    },
    resetOnHover: {
      type: Boolean,
      default: false,
    },
    position: {
      type: String,
      default: "top",
    },
  },
  emits: ["update:visible", "ok", "cancel"],
  setup(props) {
    const prefixCls = "arco-message";
    const visible = ref(false);
    const visibles = ref(false);

    const type = ref("info");

    const label = ref("");

    const classNames = computed(() => {
      return [
        // prefixCls,
        // `${prefixCls}-${type.value}`,
        {
          [`${prefixCls}-top`]: props.position === "top" && visibles.value,
        },
        // `${prefixCls}-checked`,
      ];
    });

    function show(params) {
      visible.value = true;
      nextTick(() => {
        // console.log(params);

        setTimeout(() => {
          visibles.value = true;
        }, 30);
      });

      label.value = params.title;
      type.value = params.type;
      setTimeout(() => {
        visible.value = false;
      }, props.duration);
    }

    return {
      classNames,
      visible,
      show,
      label,
      type,
    };
  },
});
export default icon;
</script>
